<template>
  <div class="linear-node">
    <div v-if="node" p2 style="background: var(--bg-function);" c-white>
      {{ node.prototype.title }}
    </div>
    <div px2 style="background: var(--bg-builtin);" v-if="node.prototype.params.length" flex items-center>
      <div flex items-center 
        v-for="(item, index) in node.slotsIn.slice(1)"
        :key="index"
        class="param">
        <span mr2 flex-shrink-0 class="param-label">{{ item.name }}</span>
        <ElInput
          v-if="item.dataType === 'number'"
          type="digit"
          size="small"
          v-model:model-value="item.data" />
        <GamePointSelect
          v-if="item.dataType === 'GamePoint'"
          v-model:modalValue="item.data" />
      </div>
      <ElIcon ml1 @click="onDelete" cursor-pointer><ElIconClose c-gray/></ElIcon>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { INode } from '~/models/graph/node/instance';
import { ElInput } from 'element-plus';

const props = defineProps<{
  node: INode;
}>()

const emits = defineEmits([
  'delete'
])

function onDelete() {
  emits('delete')
}
</script>

<style lang="scss" scoped>
.linear-node {
  display: flex;
  overflow: hidden;
  width: fit-content;

  border-radius: 0.25rem;

  &:not(:last-child) {
    border-bottom: 1px solid white;
  }
}

.param:not(:first-child)>.param-label {
  margin-left: 1rem;
}
</style>